<template>
  <DashboardLayout
    title="商家后台"
    logo-icon="🍽️"
    :username="merchantName"
    user-type="merchant"
    :active-menu="activeMenu"
    :current-title="getCurrentTitle()"
    breadcrumb-home="商家后台"
    @menu-select="handleMenuSelect"
    @logout="handleLogout"
  >
    <template #menu>
      <el-menu-item index="overview">
        <el-icon><DataAnalysis /></el-icon>
        <span>菜品评价</span>
      </el-menu-item>
      <el-menu-item index="menu">
        <el-icon><Bowl /></el-icon>
        <span>菜单管理</span>
      </el-menu-item>
      <el-menu-item index="restaurant">
        <el-icon><Shop /></el-icon>
        <span>餐厅信息</span>
      </el-menu-item>
    </template>

    <template #content>
      <!-- 菜品评价 -->
      <div v-if="activeMenu === 'overview'" class="content-section">
        <div class="section-header">
          <h2>菜品评价</h2>
          <p>查看客户对您菜品的评价和反馈</p>
        </div>
        
        <div class="reviews-table-container">
          <el-table :data="menuItems" v-loading="loading" stripe class="reviews-table">
            <el-table-column prop="foodImagePath" label="图片" width="100">
              <template #default="scope">
                <el-image 
                  :src="getImageUrl(scope.row.foodImagePath)" 
                  :alt="scope.row.foodName"
                  class="food-table-image"
                  fit="cover"
                  :preview-src-list="[getImageUrl(scope.row.foodImagePath)]"
                >
                  <template #error>
                    <el-image src="/food.png" class="food-table-image" fit="cover" />
                  </template>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="foodName" label="菜品名称" width="200" show-overflow-tooltip />
            <el-table-column prop="foodPrice" label="价格" width="120" align="center">
              <template #default="scope">
                <span class="price-text">¥{{ scope.row.foodPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="foodDescription" label="描述" min-width="250" show-overflow-tooltip />
            <el-table-column prop="foodRating" label="评分" width="200" align="center">
              <template #default="scope">
                <div class="rating-display">
                  <el-rate v-model="scope.row.foodRating" disabled show-score text-color="#ff9900" />
                  <div class="rating-details">
                    <span class="rating-text">{{ scope.row.totalReviews || 0 }}位用户评分</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 菜单管理 -->
      <div v-if="activeMenu === 'menu'" class="content-section">
        <div class="section-header">
          <h2>菜单管理</h2>
          <div class="section-actions">
            <el-input
              v-model="menuSearch"
              placeholder="搜索菜品名称..."
              prefix-icon="Search"
              style="width: 250px; margin-right: 12px;"
              clearable
              @input="handleMenuSearch"
            />
            <el-button type="primary" @click="showAddMenuDialog">
              <el-icon><Plus /></el-icon>
              添加菜品
            </el-button>
          </div>
        </div>
        
        <div class="menu-table-container">
          <el-table :data="menuItems" v-loading="loading" stripe class="menu-table">
            <el-table-column prop="foodImagePath" label="图片" width="100">
              <template #default="scope">
                <el-image 
                  :src="getImageUrl(scope.row.foodImagePath)" 
                  :alt="scope.row.foodName"
                  class="food-table-image"
                  fit="cover"
                  :preview-src-list="[getImageUrl(scope.row.foodImagePath)]"
                >
                  <template #error>
                    <el-image src="/food.png" class="food-table-image" fit="cover" />
                  </template>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="foodName" label="菜品名称" width="180" show-overflow-tooltip />
            <el-table-column prop="foodDescription" label="描述" min-width="200" show-overflow-tooltip />
            <el-table-column prop="foodPrice" label="价格" width="100" align="center">
              <template #default="scope">
                <span class="price-text">¥{{ scope.row.foodPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="分类" width="120" />
            <el-table-column prop="isActive" label="状态" width="100" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.isActive ? 'success' : 'danger'">
                  {{ scope.row.isActive ? '上架' : '下架' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" @click="editMenuItem(scope.row)">
                  编辑
                </el-button>
                <el-button 
                  :type="scope.row.isActive ? 'warning' : 'success'" 
                  size="small" 
                  @click="toggleMenuStatus(scope.row)"
                >
                  {{ scope.row.isActive ? '下架' : '上架' }}
                </el-button>
                <el-button type="danger" size="small" @click="deleteMenuItem(scope.row.foodId)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 分页 -->
          <CustomPagination
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.size"
            :total="pagination.total"
            :page-sizes="[10, 20, 50, 100]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      
      <!-- 餐厅信息 -->
      <div v-if="activeMenu === 'restaurant'" class="content-section">
        <div class="section-header">
          <h2>餐厅信息</h2>
          <p>管理您的餐厅基本信息</p>
        </div>
        
        <div class="restaurant-info-container">
          <el-card class="restaurant-form-card">
            <el-form 
              :model="restaurantInfo" 
              :rules="restaurantRules"
              ref="restaurantFormRef"
              label-width="120px"
              class="restaurant-form"
            >
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="餐厅名称" prop="merchantName">
                    <el-input v-model="restaurantInfo.merchantName" placeholder="请输入餐厅名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="contactPhone">
                    <el-input 
                      v-model="restaurantInfo.contactPhone" 
                      placeholder="请输入联系电话" 
                      maxlength="20"
                      show-word-limit
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-form-item label="餐厅地址" prop="merchantAddress">
                <el-input v-model="restaurantInfo.merchantAddress" placeholder="请输入详细地址" />
              </el-form-item>
              
              <el-form-item label="营业时间" prop="businessHours">
                <el-input 
                  v-model="restaurantInfo.businessHours" 
                  placeholder="例如：09:00-22:00" 
                  maxlength="50"
                  show-word-limit
                />
              </el-form-item>
              
              <el-form-item label="餐厅介绍" prop="merchantDescription">
                <el-input 
                  v-model="restaurantInfo.merchantDescription" 
                  type="textarea" 
                  :rows="4"
                  placeholder="请输入餐厅介绍"
                  maxlength="500"
                  show-word-limit
                />
              </el-form-item>
              
              <el-form-item label="特色标签" prop="features">
                <div class="features-input">
                  <el-tag
                    v-for="(feature, index) in restaurantInfo.features"
                    :key="index"
                    closable
                    @close="removeFeature(index)"
                    style="margin-right: 8px; margin-bottom: 8px;"
                  >
                    {{ feature }}
                  </el-tag>
                  <el-input
                    v-if="inputVisible"
                    ref="featureInputRef"
                    v-model="inputValue"
                    size="small"
                    style="width: 120px;"
                    @keyup.enter="handleInputConfirm"
                    @blur="handleInputConfirm"
                  />
                  <el-button v-else size="small" @click="showInput">添加标签</el-button>
                </div>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="updateRestaurantInfo" :loading="submitting">
                  保存信息
                </el-button>
                <el-button @click="resetRestaurantForm">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>
    </template>
  </DashboardLayout>

  <!-- 菜品表单对话框 -->
  <el-dialog 
    v-model="menuFormVisible" 
    :title="isMenuEditMode ? '编辑菜品' : '添加菜品'" 
    width="600px"
    @close="resetMenuForm"
  >
    <el-form 
      :model="menuForm" 
      :rules="menuRules" 
      ref="menuFormRef" 
      label-width="100px"
    >
      <el-form-item label="菜品名称" prop="foodName">
        <el-input v-model="menuForm.foodName" placeholder="请输入菜品名称" />
      </el-form-item>
      <el-form-item label="菜品价格" prop="foodPrice">
        <el-input-number 
          v-model="menuForm.foodPrice" 
          :min="0" 
          :precision="2" 
          :step="0.1"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label="菜品分类" prop="categoryId">
        <el-select v-model="menuForm.categoryId" placeholder="请选择分类" style="width: 100%;">
          <el-option
            v-for="category in categories"
            :key="category.categoryId"
            :label="category.categoryName"
            :value="category.categoryId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="菜品图片" prop="foodImagePath">
        <el-input v-model="menuForm.foodImagePath" placeholder="请输入图片路径或URL" />
      </el-form-item>
      <el-form-item label="菜品描述" prop="foodDescription">
        <el-input 
          v-model="menuForm.foodDescription" 
          type="textarea" 
          :rows="3"
          placeholder="请输入菜品描述"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch 
          v-model="menuForm.isActive" 
          active-text="上架" 
          inactive-text="下架"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="menuFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitMenuForm" :loading="submitting">
          {{ isMenuEditMode ? '更新' : '添加' }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { 
  UserFilled, ArrowDown, SwitchButton, DataAnalysis, Bowl, Shop, Plus, Search
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import DashboardLayout from '@/components/DashboardLayout.vue'
import CustomPagination from '@/components/CustomPagination.vue'

export default {
  name: 'MerchantDashboard',
  components: {
    UserFilled,
    ArrowDown,
    SwitchButton,
    DataAnalysis,
    Bowl,
    Shop,
    Plus,
    Search,
    DashboardLayout,
    CustomPagination
  },
  data() {
    return {
      activeMenu: 'overview',
      merchantName: localStorage.getItem('username') || '商家',
      loading: false,
      submitting: false,
      
      // 菜单数据
      menuItems: [],
      allMenuItems: [],
      menuSearch: '',
      pagination: {
        page: 1,
        size: 20,
        total: 0
      },
      
      // 菜单表单
      menuFormVisible: false,
      isMenuEditMode: false,
      currentMenuItem: null,
      menuForm: {
        foodId: null,
        foodName: '',
        foodDescription: '',
        foodPrice: 0,
        foodImagePath: '/food.png',
        categoryId: null,
        isActive: true
      },
      menuRules: {
        foodName: [
          { required: true, message: '请输入菜品名称', trigger: 'blur' }
        ],
        foodPrice: [
          { required: true, message: '请输入菜品价格', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请选择菜品分类', trigger: 'change' }
        ]
      },
      
      // 分类数据
      categories: [],
      
      // 餐厅信息
      restaurantInfo: {
        merchantName: '',
        merchantAddress: '',
        contactPhone: '',
        businessHours: '',
        merchantDescription: '',
        features: []
      },
      restaurantRules: {
        merchantName: [
          { required: true, message: '请输入餐厅名称', trigger: 'blur' }
        ],
        merchantAddress: [
          { required: true, message: '请输入餐厅地址', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { max: 20, message: '联系电话长度不能超过20位', trigger: 'blur' }
        ]
      },
      inputVisible: false,
      inputValue: ''
    }
  },
  
  mounted() {
    // 确保 features 初始化为数组
    if (!Array.isArray(this.restaurantInfo.features)) {
      this.restaurantInfo.features = []
    }
    this.loadMerchantData()
    this.loadCategories()
    this.loadRestaurantInfo()
  },
  
  methods: {
    getCurrentTitle() {
      const titles = {
        overview: '菜品评价',
        menu: '菜单管理',
        restaurant: '餐厅信息'
      }
      return titles[this.activeMenu] || '概览'
    },
    
    handleMenuSelect(index) {
      this.activeMenu = index
    },
    
    handleLogout() {
      localStorage.removeItem('token')
      localStorage.removeItem('userRole')
      localStorage.removeItem('username')
      localStorage.removeItem('userId')
      localStorage.removeItem('adminId')
      localStorage.removeItem('merchantId')
      
      this.$router.push('/login')
      ElMessage.success('退出登录成功')
    },
    
    // 加载商家数据
    async loadMerchantData() {
      this.loading = true
      try {
        const merchantId = localStorage.getItem('merchantId') || '1'
        const response = await fetch(`http://localhost:2077/api/merchant/${merchantId}/foods`, {
          headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
        })
        
        if (response.ok) {
          const data = await response.json()
          if (data.success) {
            this.allMenuItems = data.data || []
            this.updatePaginatedItems()
          } else {
            this.loadMockData()
          }
        }
      } catch (error) {
        console.error('加载商家数据失败:', error)
      } finally {
        this.loading = false
      }
    },
    
    // 更新分页数据
    updatePaginatedItems() {
      const start = (this.pagination.page - 1) * this.pagination.size
      const end = start + this.pagination.size
      this.menuItems = this.allMenuItems.slice(start, end)
      this.pagination.total = this.allMenuItems.length
    },
    
    // 分页处理
    handleSizeChange(val) {
      this.pagination.size = val
      this.pagination.page = 1
      this.updatePaginatedItems()
    },
    
    handleCurrentChange(val) {
      this.pagination.page = val
      this.updatePaginatedItems()
    },
    
    // 搜索菜品
    handleMenuSearch() {
      if (!this.menuSearch.trim()) {
        this.updatePaginatedItems()
        return
      }
      
      const searchTerm = this.menuSearch.toLowerCase()
      const filteredItems = this.allMenuItems.filter(item => 
        item.foodName.toLowerCase().includes(searchTerm) ||
        item.foodDescription.toLowerCase().includes(searchTerm) ||
        item.categoryName?.toLowerCase().includes(searchTerm)
      )
      
      this.pagination.page = 1
      this.pagination.total = filteredItems.length
      const start = (this.pagination.page - 1) * this.pagination.size
      const end = start + this.pagination.size
      this.menuItems = filteredItems.slice(start, end)
      
      if (filteredItems.length === 0) {
        ElMessage.info('未找到匹配的菜品')
      }
    },
    
    // 菜单管理
    showAddMenuDialog() {
      this.isMenuEditMode = false
      this.resetMenuForm()
      this.menuFormVisible = true
    },
    
    editMenuItem(item) {
      this.isMenuEditMode = true
      this.currentMenuItem = item
      this.menuForm = {
        foodId: item.foodId,
        foodName: item.foodName,
        foodDescription: item.foodDescription,
        foodPrice: item.foodPrice,
        foodImagePath: item.foodImagePath,
        categoryId: item.categoryId,
        isActive: item.isActive
      }
      this.menuFormVisible = true
    },
    
    resetMenuForm() {
      this.menuForm = {
        foodId: null,
        foodName: '',
        foodDescription: '',
        foodPrice: 0,
        foodImagePath: '/food.png',
        categoryId: null,
        isActive: true
      }
      if (this.$refs.menuFormRef) {
        this.$refs.menuFormRef.clearValidate()
      }
    },
    
    async submitMenuForm() {
      try {
        await this.$refs.menuFormRef.validate()
        this.submitting = true

        const merchantId = localStorage.getItem('merchantId') || '1'
        const url = this.isMenuEditMode 
          ? `http://localhost:2077/api/merchant/${merchantId}/foods/${this.menuForm.foodId}`
          : `http://localhost:2077/api/merchant/${merchantId}/foods`
        
        const method = this.isMenuEditMode ? 'PUT' : 'POST'
        
        const requestData = {
          foodName: this.menuForm.foodName,
          foodDescription: this.menuForm.foodDescription,
          price: this.menuForm.foodPrice,
          foodImagePath: this.menuForm.foodImagePath,
          categoryId: this.menuForm.categoryId,
          isActive: this.menuForm.isActive
        }
        
        const response = await fetch(url, {
          method: method,
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(requestData)
        })

        if (response.ok) {
          const data = await response.json()
          if (data.success) {
            ElMessage.success(this.isMenuEditMode ? '菜品更新成功' : '菜品添加成功')
            this.menuFormVisible = false
            this.loadMerchantData()
          } else {
            ElMessage.error(data.message || '操作失败')
          }
        } else {
          ElMessage.error('网络请求失败')
        }
        
      } catch (error) {
        console.error('提交菜品表单失败:', error)
        ElMessage.error('表单验证失败')
      } finally {
        this.submitting = false
      }
    },
    
    async deleteMenuItem(foodId) {
      try {
        await ElMessageBox.confirm('确定要删除该菜品吗？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const merchantId = localStorage.getItem('merchantId') || '1'
        const response = await fetch(`http://localhost:2077/api/merchant/${merchantId}/foods/${foodId}`, {
          method: 'DELETE',
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`,
            'Content-Type': 'application/json'
          }
        })

        if (response.ok) {
          const data = await response.json()
          if (data.success) {
            ElMessage.success('删除成功')
            this.loadMerchantData()
          } else {
            ElMessage.error(data.message || '删除失败')
          }
        } else {
          ElMessage.error('网络请求失败')
        }
        
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除菜品失败:', error)
          ElMessage.error('删除失败')
        }
      }
    },
    
    async toggleMenuStatus(item) {
      try {
        const merchantId = localStorage.getItem('merchantId') || '1'
        const response = await fetch(`http://localhost:2077/api/merchant/${merchantId}/foods/${item.foodId}/status`, {
          method: 'PUT',
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ isActive: !item.isActive })
        })

        if (response.ok) {
          const data = await response.json()
          if (data.success) {
            ElMessage.success(item.isActive ? '菜品已下架' : '菜品已上架')
            this.loadMerchantData()
          } else {
            ElMessage.error(data.message || '操作失败')
          }
        } else {
          ElMessage.error('网络请求失败')
        }
      } catch (error) {
        console.error('切换菜品状态失败:', error)
        ElMessage.error('操作失败')
      }
    },
    
    // 加载分类数据
    async loadCategories() {
      try {
        const response = await fetch('http://localhost:2077/api/categories', {
          headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
        })
        
        if (response.ok) {
          const data = await response.json()
          this.categories = data.data || []
        }
      } catch (error) {
        console.error('加载分类失败:', error)
      }
    },
    
    // 加载餐厅信息
    async loadRestaurantInfo() {
      try {
        const merchantId = localStorage.getItem('merchantId') || '1'
        const response = await fetch(`http://localhost:2077/api/merchant/${merchantId}`, {
          headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
        })
        
        if (response.ok) {
          const data = await response.json()
          if (data.success && data.data) {
            this.restaurantInfo = {
              merchantName: data.data.merchantName || '',
              merchantAddress: data.data.merchantAddress || '',
              contactPhone: data.data.contactPhone || '',
              businessHours: data.data.businessHours || '',
              merchantDescription: data.data.merchantDescription || '',
              features: this.parseFeaturesFromAPI(data.data.features)
            }
          }
        }
      } catch (error) {
        console.error('加载餐厅信息失败:', error)
      }
    },
    
    // 餐厅信息管理
    async updateRestaurantInfo() {
      try {
        await this.$refs.restaurantFormRef.validate()
        this.submitting = true
        
        // 确保 features 是数组
        if (!Array.isArray(this.restaurantInfo.features)) {
          this.restaurantInfo.features = []
        }
        
        const merchantId = localStorage.getItem('merchantId') || '1'
        const requestData = {
          merchantName: this.restaurantInfo.merchantName,
          merchantAddress: this.restaurantInfo.merchantAddress,
          contactPhone: this.restaurantInfo.contactPhone,
          businessHours: this.restaurantInfo.businessHours,
          merchantDescription: this.restaurantInfo.merchantDescription,
          features: JSON.stringify(this.restaurantInfo.features)
        }
        
        const response = await fetch(`http://localhost:2077/api/merchant/${merchantId}`, {
          method: 'PUT',
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(requestData)
        })
        
        if (response.ok) {
          const data = await response.json()
          if (data.success) {
            ElMessage.success('餐厅信息更新成功')
          } else {
            ElMessage.error(data.message || '更新失败')
          }
        } else {
          ElMessage.error('网络请求失败')
        }
      } catch (error) {
        console.error('更新餐厅信息失败:', error)
        ElMessage.error('操作失败，请稍后重试')
      } finally {
        this.submitting = false
      }
    },
    
    resetRestaurantForm() {
      this.restaurantInfo = {
        merchantName: '',
        merchantAddress: '',
        contactPhone: '',
        businessHours: '',
        merchantDescription: '',
        features: []
      }
      // 确保 features 是数组
      if (!Array.isArray(this.restaurantInfo.features)) {
        this.restaurantInfo.features = []
      }
      if (this.$refs.restaurantFormRef) {
        this.$refs.restaurantFormRef.resetFields()
      }
    },
    
    // 工具方法
    getImageUrl(path) {
      if (!path) return '/food.png'
      if (path.startsWith('http')) return path
      return path.startsWith('/') ? path : `/${path}`
    },
    
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.featureInputRef.focus()
      })
    },
    
    handleInputConfirm() {
      if (this.inputValue.trim()) {
        // 确保 features 是数组
        if (!Array.isArray(this.restaurantInfo.features)) {
          this.restaurantInfo.features = []
        }
        this.restaurantInfo.features.push(this.inputValue.trim())
        this.inputValue = ''
        this.inputVisible = false
      }
    },
    
    removeFeature(index) {
      // 确保 features 是数组
      if (!Array.isArray(this.restaurantInfo.features)) {
        this.restaurantInfo.features = []
        return
      }
      this.restaurantInfo.features.splice(index, 1)
    },
    
    // 解析从API返回的features数据
    parseFeaturesFromAPI(features) {
      if (!features) return []
      
      // 如果已经是数组，直接返回
      if (Array.isArray(features)) {
        return features
      }
      
      // 如果是字符串，尝试解析JSON
      if (typeof features === 'string') {
        try {
          const parsed = JSON.parse(features)
          return Array.isArray(parsed) ? parsed : []
        } catch (error) {
          console.warn('解析features JSON失败:', error)
          return []
        }
      }
      
      return []
    }
  }
}
</script>

<style scoped>
.content-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.section-header h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.section-header p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 表格样式 */
.reviews-table-container,
.menu-table-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.reviews-table,
.menu-table {
  width: 100%;
}

.food-table-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.price-text {
  font-weight: 600;
  color: #e74c3c;
  font-size: 16px;
}

.rating-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rating-details {
  text-align: center;
}

.rating-text {
  font-size: 12px;
  color: #6b7280;
}

/* 餐厅信息样式 */
.restaurant-info-container {
  max-width: 800px;
}

.restaurant-form-card {
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.restaurant-form {
  padding: 16px;
}

/* 特色标签样式 */
.features-input {
  min-height: 80px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px;
  background-color: #f9f9f9;
}

.features-input .el-tag {
  margin-right: 8px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
}

.features-input .el-button {
  height: 24px;
  border: 1px dashed #dcdfe6;
  background-color: transparent;
}

/* 对话框样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .section-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .section-actions .el-input {
    width: 100% !important;
  }
  
  .content-section {
    padding: 16px;
  }
  
  .restaurant-form {
    padding: 8px;
  }
}

/* 表格在移动端的优化 */
@media (max-width: 480px) {
  :deep(.el-table) {
    font-size: 12px;
  }
  
  :deep(.el-table .el-button) {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .food-table-image {
    width: 40px;
    height: 40px;
  }
}
</style> 